<template>
  <div lang="theme-add-dialog">
    <a-form-model :model="form" :rules="rules" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="集群名称：">
        <a-select v-model="form.cluster" placeholder="请选择集群" @change="clusterChange">
          <a-select-option v-for="cluster in clusterList" :key="cluster.id" :value="cluster.id">
            {{ cluster.clusterName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="BROKER_NAME：">
        <a-select v-model="form.broker" placeholder="请选择borker">
          <a-select-option v-for="broker in brokerList" :key="broker.id" :value="broker.id">
            {{ broker.brokerName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="主题名称" prop="topicName">
        <a-input v-model="form.topicName" />
      </a-form-model-item>
      <a-form-model-item label="写队列数量：">
        <a-input-number v-model="form.writeQueueNums" />
      </a-form-model-item>
      <a-form-model-item label="读队列数量：">
        <a-input-number v-model="form.readQueueNums" />
      </a-form-model-item>
      <a-form-model-item label="perm：">
        <a-input-number v-model="form.perm" />
      </a-form-model-item>
      <a-form-model-item label="是否有序">
        <a-select v-model="form.order">
          <a-select-option :value="1">
            是
          </a-select-option>
          <a-select-option :value="0">
            否
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import orupService from '@/api/orupService'

export default {
  name: 'ThemeAddDialog',

  data () {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      form: {
        brokers: [],
        cluster: undefined,
        broker: undefined,
        topicName: '',
        writeQueueNums: 0,
        readQueueNums: 0,
        perm: 0,
        order: undefined
      },
      rules: {
        topicName: [
          { required: true, message: '主题名称不能为空', trigger: 'blur' }
        ]
      },
      clusterList: [],
      brokerList: []
    }
  },

  async mounted () {
    await this.getCluster()
  },

  methods: {
    async getCluster () {
      this.clusterList = await orupService.colonyClusterListQuery()
    },
    clusterChange (value) {
      this.borkerList = []
      if (value) {
        orupService.colonyBrokerListQuery(value).then(res => {
          if (res && res.length > 0) {
            this.brokerList = res
          }
        })
      }
    },
    submit () {
      const broker = this.brokerList.filter(item => {
        return item.id === this.form.broker
      })
      const filterBroker = broker.map(({ id, brokerName, brokerClusterId, brokerClusterName, brokerRole }) => ({
        id, brokerName, brokerClusterId, brokerClusterName, brokerRole
      }))
      this.form.brokers = filterBroker
      delete this.form.broker
      let isValid = ''
      this.$refs.ruleForm.validate(valid => {
        isValid = valid
      })
      return isValid
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .ant-input-number {
  width: 415px;
}

</style>
